<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
<link rel="stylesheet" href="assets/css/amazeui.min.css" />
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="js/main.js"></script>
<script src="js/md5.js"></script>
<style type="text/css">
img {
	display: block;
	margin: 1.5em auto;
}

input {
	margin: 0 0.1em;
}

style.header {
	text-align: center;
}

.header h1 {
	font-size: 200%;
	color: #333;
	margin-top: 30px;
}

.header p {
	font-size: 14px;
}
#vld-tooltip {
    position: absolute;
    z-index: 1000;
    padding: 5px 10px;
    background: #F37B1D;
 	font-size:15px;
 	min-width: 100px;
    color: #fff;
    transition: all 0.15s;
    box-shadow: 0 0 5px rgba(0,0,0,.15);
    line-height: 1.2;
    display: none;
  }

  #vld-tooltip:before {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
    content: "";
    border-width: 0 8px 8px;
    border-color: transparent transparent #F37B1D;
    border-style: none inset solid;
  }
</style>

<script type="text/javascript">
	$(function (){
		var user=window.localStorage.getItem("userstr");
		if(user=='undefined'||user=='null'){
			user=null;
		}
		if(user){
			user=JSON.parse(user);		
			$("input[name='username']").val(user.username);
			$("input[name='password']").val(user.password);
		}
		doFormValidate('form');
		//doValidate('#loginForm');
	});
	function doLogin(){
		//doValidate();
		if($('#loginForm').validator('isFormValid')){
			userLogin();
		}
	//	
	}
	
	
		
	
	/**
	 *  $.each(dataObj, function(key, value) {
		alert(key+":"+value);
	});
*/
	function userLogin() {
		var reqData = new RequestData('login.action');
		reqData.username = $('#username').val();
		reqData.password = $('#password').val();
	 
		//$.AMUI.progress.start();
	//	return ;
		var jsonstr = JSON.stringify(reqData);
		$.ajax({
			cache : false,
			type : "POST",
			timeout : 5000,
			crossDomain : true,
			url : testUrl,
			data : jsonstr, //你的formid
			async : true,
			error : function(request) {		
				popAlert("Connection error");			
			},
			success : function(data) {
			 
				var dataObj = eval("(" + data + ")");
				if (dataObj.ret == 1) {
					var jsonObj = JSON.stringify(dataObj.params);
					window.sessionStorage.clear(); 
					window.sessionStorage.setItem("index", jsonObj);
					window.sessionStorage.setItem("userid",dataObj.params.userid);
					
					 
					 /**保存用户登录信息***/
					var user =new UserObj(reqData.username,reqData.password);
	 				var userstr = JSON.stringify(user);
	 				window.localStorage.setItem("userstr", userstr);
	 				 /**保存用户登录信息***/
					location.href = "index.html";
				} else {
					popAlert(dataObj.msg);
					resetForm();
				}

			}
		});

	}
	function resetForm() {
		$("input[name='username']").val("");
		$("input[name='password']").val("");
	}
</script>
</head>
<body>
	<div class="am-g">
		<img class="" src="image/logo.png">
		<!--<h2>车夫商家登记系统</h2>-->
		<form class="am-form am-form-horizontal" id="loginForm">
			<div class="am-form-group">
			
			<div class="am-u-sm-12">
				<input type="text" name="username" id="username" placeholder="用户名" required data-foolish-msg="请填写用户名"
					 />
				</div>
			</div>
			<div class="am-form-group">
			<div class="am-u-sm-12">
				<input type="password" name="password" id="password" required data-foolish-msg="请填写密码"
					placeholder="密码"  />
					</div>
			</div>
			<div class="am-form-group" style="margin-top:2em;">
				<div class="am-u-sm-6">
					<button type="button" id="loginBtn" onclick="doLogin()"
						class="am-btn am-btn-secondary am-btn-block">登录</button>
				</div>
				<div class="am-u-sm-6">
					<button type="reset" 
						class="am-btn am-btn-secondary  am-btn-block">重置</button>
				</div>
			</div>
			<div class="am-g"></div>
		</form>
	</div>

</body>
</html>
